<template>
  <el-row>
    <el-col :span="24"  class="operation" >
        <el-button class="upload-demo" plain @click="refresh"><i class="el-icon-refresh el-icon-left"> 刷新</i></el-button>
        <el-upload
          class="upload-demo"
          action="/api/File/OnlyUploadImage"
          :data="data.UploadData"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-button plain><i class="el-icon-upload2 el-icon-left"> 上传</i></el-button>
        </el-upload>
        <el-button type="success" @click="newGroupVisible=true" plain><i class="el-icon-plus el-icon-left"> 新增分组</i></el-button>
        <el-button class="delete-button" type="danger" plain><i class="el-icon-delete el-icon-left"> 删除图片</i></el-button>
        <el-button @click="cancelCheckedIamges" class="delete-button" type="primary" plain><i class="el-icon-close el-icon-left"> 取消选择</i></el-button>
    </el-col>
      <el-col class="group uploadFileDialog" :span="4">
          <el-menu default-active="1">
            <el-menu-item @click="getFileList({'search':item.GroupId})" :index="item.GroupId" v-for="item in data.group" :key="item.GroupId">
              <template #title>{{item.GroupName}}</template>
            </el-menu-item>
            <el-menu-item class="new-group" v-show="newGroupVisible">
              <el-input style="width:80%" v-model="GroupValue" @change="saveGroup" placeholder="请输入内容"></el-input> <i class="el-icon-close" @click="newGroupVisible=false"></i>
            </el-menu-item>
          </el-menu>
      </el-col>
      <el-col :span="20" class="file-main uploadFileDialog">
          <el-image :class="item.Checked?'el-image-check':''" v-for="item in data.list" :key="item.FileId"
          :src="BASE_IMAGE_URL + item.FileName"
          :preview-src-list="srcList"
          fit="cover"
          lazy
          @click="checkImage(item)"
          >
            <template #placeholder>
              <div class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </template>
          </el-image>
      </el-col>
  </el-row>
</template>
<script>
import { BASE_IMAGE_URL } from '@/utils/config';
import { getCurrentInstance, reactive, ref } from 'vue';
export default {
  name:"UploadFile",
  props:{
    CheckLimit:{
      type: Object,
      default: () =>{}
    },
    Checked:{
      type: Object,
      default: () =>{}
    }
  },
  setup(props, { emit, attrs }){
    let { ctx } = getCurrentInstance();
    let data = reactive({
      page:1,
      pageSize:20,
      list:[],
      group:[],
      CheckedNum:0,
      Checked:[],
      UploadData:{GroupId:1}
    })
    let list = []
    let newGroupVisible = ref(false)
    let GroupValue = ref("")
    let limit = props.CheckLimit
    data.Checked = props.Checked
    data.CheckedNum = data.Checked.length
    function refresh(){
      getFileList({search:1})
      getFileGroupList()
    }
    function handleUploadSuccess(response, file, fileList){
      if(response.Code == 0)
      {
        ctx.$message.success(response.Msg)
        data.list.push(response.Data)
        // refresh()
      }
    }
    // 获取文件列表
    async function getFileList(params){
      data.UploadData.GroupId = params.search
      let res = await ctx.$fetch.get("/File/List",params)
      if(res.Code >= 0 )
      {
        // let resultList = res.Data.list
        list = JSON.parse(JSON.stringify(res.Data.list));
        data.list = res.Data.list
        data.total = res.Data.total
        for (let first = 0; first < data.list.length; first++) {
          for (let second = 0; second < data.Checked.length; second++) {
            if(data.list[first].FileId == data.Checked[second].FileId)
            {
              data.list[first].Checked = true
            }
          }
        }
      }
    }
    getFileList({search:1})

    // 获取文件分组列表
    async function getFileGroupList(){
      let res = await ctx.$fetch.get("/File/Group/All-List")
      if(res.Code >= 0 )
      {
        data.group = res.Data
      }
    }
    getFileGroupList()

    // 选择图片
    function checkImage(item){
      if(limit != null && limit <= data.CheckedNum && !item.Checked)
      {
        ctx.$message.error("最多只能选择"+ limit + "张图片")
        return false;
      }
      item.Checked = !item.Checked
      if(item.Checked)
      {
        data.Checked.push(item)
        data.CheckedNum = data.CheckedNum+1
      }else
      {
        for(let i = 0; i < data.Checked.length; i++)
        {
          if(item.FileId == data.Checked[i].FileId)
          {
            data.Checked.splice(i, 1)
          }
        }
        data.CheckedNum = data.CheckedNum-1
      }
    }

    // 全部取消
    function cancelCheckedIamges(){
      data.Checked.length = 0
      data.CheckedNum = 0
      data.list.length = 0
      data.list = JSON.parse(JSON.stringify(list));
      // getFileList({search:1})
    }

    async function saveGroup(){

      let params = {
        GroupName : GroupValue.value,
        GroupType : "image",
        Sort      : 0
      }
      let res = await ctx.$fetch.get("/File/Group/Save",params)
      if(res.Code == 0)
      {
        data.group.push(params)
        newGroupVisible.value = false
        ctx.$message.success(res.Msg)
      }else
      {
        ctx.$message.error(res.Msg)
      }
    }
    return {
      BASE_IMAGE_URL,
      checkImage,
      cancelCheckedIamges,
      getFileList,
      getFileGroupList,
      data,
      newGroupVisible,
      GroupValue,
      saveGroup,
      handleUploadSuccess,
      refresh
    }
  }
}
</script>
<style scoped>
.operation{
  text-align: left;
  margin-bottom: 10px;
}
.uploadFileDialog{
  height: 400px;
  overflow-y: scroll;
}
.upload-demo{
  display: inline-block;
  margin-right: 10px;
}
.group{
  /* border-right:1px solid #ccc */
  width: 20%;
}
.delete-button{
  position: relative;
  right: 0;
}
.file-main{
  text-align: left;
  padding-left: 10px;
}
.block{
  display: inline-block;
}
.el-image{
  border-radius: 4px;
  margin: 0px 12px 12px 0px;
  border: 1px solid #dddddd;
  background-color: #fff;
  padding:6px;
  border-radius: 4px;
  width: 130px;
  height: 130px;
}
.el-image-check{
  border: 6px solid #409EFF !important;
  padding: 0;
}
.el-image__inner{
  height: auto;
  margin:0;
  padding:0
}
</style>
